<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2022-03-23 15:54:22
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-06-15 11:33:45
 * @Description: file content
-->
<template>
  <div class="developer-select">
    <ul class="developer-select-options">
      <li v-for="mode in mode" :key="mode.value" @click="handleCommand(mode)">
        <span>{{ mode.label }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import {
  getClientCatch,
  getUserCache,
  getAuthCache,
  getDictionaryCache,
  logoutUsers
} from '@/api/app'
export default {
  data() {
    return {
      data: {}
    }
  },
  computed: {
    CLIENT() {
      return this.$store.getters.clientConfig.clientId
    },
    mode() {
      return [
        { value: 'SyncUserCache', label: this.LANG.SYNC_USER_CACHE },
        { value: 'SyncUserPermission', label: this.LANG.SYNC_USER_PERMISSION },
        { value: 'SyncClientCache', label: this.LANG.SYNC_CLIENT_CACHE },
        {
          value: 'SyncDictionaryCache',
          label: this.LANG.SYNC_DICTIONARY_CACHE
        },
        { value: 'LogoutUsers', label: this.LANG.LOGOUT_USERS },
        {
          value: 'LogouttUserByClient',
          label: this.LANG.LOGOUT_USER_BY_CLIENT
        },
        { value: 'close', label: this.LANG.CLOSE_DEVELOPER_MODE }
      ]
    }
  },
  methods: {
    handleCommand(data) {
      switch (data.value) {
        case 'SyncClientCache': {
          getClientCatch()
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.SYNC_CLIENT_CACHE_SUCCESS)
              }
            })
            .catch(() => {})
          break
        }
        case 'SyncUserCache': {
          getUserCache()
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.SYNC_USER_CACHE_SUCCESS)
              }
            })
            .catch(() => {})
          break
        }
        case 'SyncUserPermission': {
          getAuthCache()
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.SYNC_USER_PERMISSION_SUCCESS)
              }
            })
            .catch(() => {})
          break
        }
        case 'SyncDictionaryCache': {
          getDictionaryCache()
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.SYNC_DICTIONARY_CACHE_SUCCESS)
              }
            })
            .catch(() => {})
          break
        }
        case 'LogoutUsers': {
          logoutUsers()
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.LOGOUT_USERS_SUCCESS)
              }
            })
            .catch(() => {})
          break
        }
        case 'LogouttUserByClient': {
          logoutUsers({ clientId: this.CLIENT })
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.LOGOUT_USER_BY_CLIENT_SUCCESS)
              }
            })
            .catch(() => {})
          break
        }
        case 'close': {
          this.$store.commit('setDeveloperFlag', 0)
          this.$message.success(this.LANG.CLOSE_DEVELOPER_MODE_SUCCESS)
          break
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.developer-select {
  &-title {
    padding: 0 0 8px;
    border-bottom: 1px solid #f2f3f4;
    font-weight: bold;
    text-align: center;
    color: #393e45;
  }

  &-options {
    padding: 8px 0 0;

    li {
      padding: 4px 0;
      font-size: 0;
      text-align: center;
      cursor: pointer;

      &:hover {
        background-color: #f7f8f8;
      }
    }

    li + li {
      margin-top: 4px;
    }

    span {
      font-size: 14px;
      vertical-align: middle;
      color: #999;
    }
  }
}
</style>
